<template>
	<div class="gobang">
		<div class="gobang-chessboard" ref="gobangChessboard">
			<canvas id="chessboard" ref="chessboardCanvas"></canvas>
			<div class="gobang-chessboard-operation">
				<button @click="debounce(()=>{regretClick()},500)()">悔棋（{{data.regretCount}}）</button>
				<button @click="debounce(()=>{surrenderClick()},500)()">投降</button>
				<button @click="debounce(()=>{leaverClick()},500)()">离开</button>
			</div>
		</div>
		<div class="gobang-gameplay">
			<div class="gobang-gameplay-people">
				当前执棋：{{data.playChess}}
				<div class="gobang-gameplay-people-other" v-for="item in 2">
					<span>
						<img :src="defaluteImg(item == 2?store.state.userInfoX?.avatar:data.opposite?.avatar)" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}">
						<strong v-show="data.isStartTime == item">{{timing}}</strong>
					</span>
					<span v-if="data.opposite">{{item==1?data.opposite?.nickName:store.state.userInfoX?.nickName}}<b> - {{item==1?data.opposite?.account === 'admin'?data.opposite.grade:data.otherGradeTotal:data.currentGrade}}</b></span>
					<span v-else @click="inviteClick(item)"  :class="{inviteStyle:item==1}">{{item==1?'点击邀请':store.state.userInfoX?.nickName}}<b  v-if="item==2"> - {{data.currentGrade}}</b></span>
				</div>
			</div>
			<div class="gobang-gameplay-people-send">
				<el-select
				    v-model="data.sendValue"
				    filterable
				    allow-create
				    default-first-option
				    :reserve-keyword="false"
				    placeholder="发送信息调侃对方吧"
				  >
				    <el-option
				      v-for="item in data.options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				    />
				  </el-select>
				<el-button @click="sendMain">发送</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref,onMounted,reactive,inject,onBeforeUnmount,watch } from 'vue'
	import bus from '../../public/bus'
	import {HttpPersonalList,HttpGameRecord,HttpGameTotalRecord,HttpAlterScore} from '../../public/http'
	import { useRouter,useRoute } from 'vue-router'
	import {debounce,defaluteImg,gradeTotal} from '../../public/common'
	import { sendMessage } from "../main/webServer"
	import { ElMessage,ElMessageBox} from 'element-plus'
	import { useChessboard,useChessPiece,useTiming,useManMachine,useRegret,useIsStartchess,useGetchess } from '../main/useChessboard.ts'
	import { playAudio } from '../main/webServer'
	import moment from 'moment'
	const store = inject('store')
	const router = useRouter()
	const gobangChessboard = ref<HTMLElement>();
	const chessboardCanvas = ref<HTMLElement>();
	const inviteConfim = ref<HTMLElement>();
	let winDescride = ref<string>("")
	let params:any = null
	let timing = ref<number>(20)
	let userValue = ref<string>("")
	let data = reactive({
		playChess:"黑棋",
		currentChess:"",
		isStartTime:0,
		websocket:null,
		opposite:null,
		saveInviteInfo:null,
		isScroll:null,
		inviteData:[],
		sendValue:"",
		regretCount:3,
		regretUse:true,
		otherGradeTotal:0,
		machineGradeTotal:0,
		currentGrade:0,
		options:[{
			value: '快点吧，我等的花儿都谢了',
			label: '快点吧，我等的花儿都谢了',
		  },
		  {
			value: '你是MM还是GG',
			label: '你是MM还是GG',
		  },
		  {
			value: '面对疾风吧',
			label: '面对疾风吧',
		  },{
			value: '我的大刀早已饥渴难耐了',
			label: '我的大刀早已饥渴难耐了',
		  },{
			value: '是时候展现真正的技术了',
			label: '是时候展现真正的技术了',
		  },{
			value: '不要走决战到天亮',
			label: '不要走决战到天亮',
		  },{
			value: '下次再玩,我要先走了',
			label: '下次再玩,我要先走了',
		  }]
		
	})
	
	
	// 监听值
	bus.on('info',async (value:any)=>{
		let info = JSON.parse(value)
		if(info.to == store.state.userInfoX.account){
			if(info.infoType == 'coord'){
				// 坐标接收
				params.x = info.x
				params.y = info.y
				params.currentType = 2
				useTiming(10,(count)=>{
				  timing.value = count
				  data.isStartTime = 2
				})
				useChessPiece(0,params,data)
			}else if(info.infoType == 'agree'){
				// 同意信息接收
				data.opposite = data.saveInviteInfo
				bus.emit('hideUserList')
				useTiming(10,(count)=>{
				  timing.value = count
				  data.isStartTime = 2
				})
				
			}else if(info.infoType == 'refuse'){
				ElMessage({
					message: info.nickName+"拒绝了你的请求！",
					type: 'warning',
				})
			}else if(info.infoType == 'leave'){
				clearMain()
				winClick()
				ElMessage({
					message: info.nickName+"离开了房间！",
					type: 'warning',
				})
			}else if(info.infoType == 'surrender'){
				let other_account = data.opposite?.account?data.opposite?.account:data.opposite?.from
				let s = useGetchess()
				s.currentChess = data.currentChess
				await HttpGameRecord({
					user_account:store.state.userInfoX.account,
					record:JSON.stringify(s),
					other_account:other_account,
					win:1,
					game_type:1,
					grade:data.regretCount === 3?10:10 - (3 - data.regretCount)*3,
				})
				let result = await HttpGameTotalRecord({
					account:store.state.userInfoX.account,
					game_type:1
				})
				await HttpAlterScore({
					account:store.state.userInfoX.account,
					score:result.total
				})
				clearMain()
				winClick()
				ElMessage({
					message: info.nickName+"发起了投降！",
					type: 'warning',
				})
				bus.emit('tip',info.nickName+'发起了投降，恭喜您取得了胜利！')
				playAudio(4)
			}else if(info.infoType == 'regret'){
				playAudio(4)
				ElMessageBox.confirm(
				    '对方请求悔棋，是否允许?',
				    '警告',
				    {
				      confirmButtonText: '确定',
				      cancelButtonText: '拒绝',
				      type: 'warning',
				    }
				  )
				    .then(() => {
						 let message = {
							infoType:'regretAgree',//同意悔棋信息
							to:info.from,
						 }
						 let result = sendMessage(message)
						 if(result){
							useTiming(10,(count)=>{
							  timing.value = count
							})
							data.isStartTime = data.isStartTime === 2?1:2
							data.playChess = (data.playChess==='黑棋'?'白棋':'黑棋')
							useRegret(chessboardCanvas,params,data,1)
						 }
				    })
				    .catch(() => {
						let message = {
							infoType:'regretRefuse',//拒绝悔棋信息
							to:info.from,
						}
						let result = sendMessage(message)
						if(result){
													
						}
				    })
				
			}else if(info.infoType == 'regretAgree'){
				ElMessage({
					message: '对方已同意您的悔棋！',
					type: 'success',
				})
				useTiming(10,(count)=>{
				  timing.value = count
				  
				})
				data.isStartTime = data.isStartTime === 2?1:2
				data.playChess = (data.playChess==='黑棋'?'白棋':'黑棋')
				useRegret(chessboardCanvas,params,data)
			}else if(info.infoType == 'regretRefuse'){
				ElMessage({
					message: '对方拒绝了您的悔棋！',
					type: 'success',
				})
				data.regretUse = true
			}else if(info.infoType == 'splitChess'){
				data.currentChess = 1
				gameTotalMain(2)
			}else if(info.infoType == 'message'){
				ElMessage({
					message: info.content,
					type: 'success',
				})
				if(info.content.indexOf('快点吧，我等的花儿都谢了') > -1){
					playAudio(6)
				}else if(info.content.indexOf('面对疾风吧') > -1){
					playAudio(7)
				}
			}
		}
		
	})
	// 邀请
	bus.on('inviteClick',(item)=>{
		item = JSON.parse(item)
		if(item.account === 'admin'){
			bus.emit('hideUserList')
			useTiming(10,(count)=>{
			  timing.value = count
			  data.isStartTime = 2
			})
			data.opposite = item
			let info = {
				infoType:'machineStart',//离开信息
				to:store.state.userInfoX.account,
			}
			let result = sendMessage(info)
			if(result){
				 
			}
			return
		}
		let info = {
			infoType:'invite',//邀请信息
			to:item.account,
			gameName:'五子棋大战',
			gameUrl:'/gobang'
		}
		let result = sendMessage(info)
		if(result){
			data.saveInviteInfo = item
			ElMessage({
				message: "已给对方发送邀请！",
				type: 'success',
			})
		}
	})
	
	bus.on('lost',(e)=>{
		if(data.opposite){
			ElMessage({
				message: '对方已掉线！',
				type: 'warning',
			})
			winClick()
			clearMain()
			let info = {
				infoType:'updateStatus',//更新自我状态
				to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
			}
			let result = sendMessage(info)
			if(result){
				
			}
		}
	})
	
	bus.on('clear',()=>{
		if(data.opposite){
			ElMessage({
				message: '游戏已被强制中断',
				type: 'warning',
			})
			winClick()
			clearMain()
		}
	})
	const machineTip = ()=>{
		if(data.opposite?.account === 'admin'){
			ElMessage({
				message: "人机对战此功能不可用！",
				type: 'warning',
			})
			return true
		}
	}
	// 发送信息
	const sendMain = ()=>{
		if(machineTip()) return
		if(!data.opposite){
			ElMessage({
				message: "游戏未开始！",
				type: 'warning',
			})
			return
		}
		if(data.sendValue){
			let info = {
				infoType:'message',//邀请信息
				to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
				content:data.sendValue
			}
			let result = sendMessage(info)
			if(result){
				ElMessage({
					message: "已发送！",
					type: 'success',
				})
			}
		}else{
			ElMessage({
				message: "请选择发送的信息！",
				type: 'warning',
			})
		}
	}
	// 计时开始,随机黑白
	const timingRandom = ()=>{
		let info = {
			infoType:'agree',//同意信息
			to:data.opposite?.from,
		}
		let result = sendMessage(info)
		if(result){
			useTiming(10,(count)=>{
			  timing.value = count
			  data.isStartTime = 1
			})
			let info = {
				infoType:'splitChess',//分离谁是黑棋 谁是白棋
				to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
			}
			let result = sendMessage(info)
			if(result){
				data.currentChess = 2 //1是黑棋
			}
		}
		
	}
	// 开始对战
	const startBattle = ()=>{
		let battleInfo = store.state.battleInfoX
		console.log(battleInfo)
		if(battleInfo){
			data.opposite = battleInfo
			bus.emit('hideUserList')
			gameTotalMain(2)
			timingRandom()
		}
	}
	
	
	const inviteClick = (n)=>{
		if(n == 1 && !data.opposite){
			bus.emit('openUserList',1)
		}
	}
	
	
	bus.on('closeTip',()=>{
		winClick()
	})
	// 点击确定重置
	const winClick = (type)=>{
		const width = gobangChessboard.value.clientWidth - 60
		const height = gobangChessboard.value.clientHeight - 60
		chessboardCanvas.value.width = width
		chessboardCanvas.value.height = height
		params = useChessboard(chessboardCanvas,width,height)
	}
	// 监听输赢
	bus.on('win',async (value:any)=>{
		let {w,baseData,context,i,k,s} = JSON.parse(value)
		if(params.currentType !== 2 && data.opposite?.account !== 'admin'){
			sendPosMain(i,k)
		}
		if(data.opposite?.account === 'admin' && data.isStartTime === 2){
		  useTiming(10,(count)=>{
			timing.value = count
			data.isStartTime = 1
		  })
		}
		if(w){
			if(data.opposite?.account === 'admin'){
				if(w === 1){
					winDescride.value = '恭喜您取得了胜利！'
					playAudio(4)
					s.currentChess = data.currentChess
					await HttpGameRecord({
						user_account:store.state.userInfoX?.account,
						record:JSON.stringify(s),
						other_account:data.opposite?.account,
						win:1,
						game_type:1,
						grade:data.regretCount === 3?5:5 - (3-data.regretCount)*1,
					})
					let result = await HttpGameTotalRecord({
						account:store.state.userInfoX.account,
						game_type:1
					})
					await HttpAlterScore({
						account:store.state.userInfoX.account,
						score:result.total
					})
				}else{
					winDescride.value = '很遗憾您输了！'
					playAudio(5)
					s.currentChess = data.currentChess
					await HttpGameRecord({
						user_account:store.state.userInfoX.account,
						record:JSON.stringify(s),
						other_account:data.opposite?.account,
						win:0,
						game_type:1,
						grade:data.regretCount === 3?5:(3-data.regretCount)*1 + 5,
					})
					let result = await HttpGameTotalRecord({
						account:store.state.userInfoX.account,
						game_type:1
					})
					await HttpAlterScore({
						account:store.state.userInfoX.account,
						score:result.total
					})
				}
			}else{
				if(w === 1){
					winDescride.value = data.opposite?.to == store.state.userInfoX.account?'很遗憾您输了！':'恭喜您取得了胜利！'
				}else{
					winDescride.value = data.opposite?.to !== store.state.userInfoX.account?'很遗憾您输了！':'恭喜您取得了胜利！'
				}
				// user_account:本人
				// record:棋盘记录
				// other_account:对方
				// win：输赢 1：赢，0：输
				// game_type：游戏类型：1：五子棋
				// grade：分数，赢了：加5分，输了减5分
				if(winDescride.value.indexOf('输') > -1){
					playAudio(5)
					let other_account = data.opposite?.account?data.opposite?.account:data.opposite?.from
					s.currentChess = data.currentChess
					await HttpGameRecord({
						user_account:store.state.userInfoX.account,
						record:JSON.stringify(s),
						other_account:other_account,
						win:0,
						game_type:1,
						grade:data.regretCount === 3?5:(3-data.regretCount)*1 + 5,
					})
					let result = await HttpGameTotalRecord({
						account:store.state.userInfoX.account,
						game_type:1
					})
					await HttpAlterScore({
						account:store.state.userInfoX.account,
						score:result.total
					})
				}else{
					playAudio(4)
					let other_account = data.opposite?.account?data.opposite?.account:data.opposite?.from
					s.currentChess = data.currentChess
					await HttpGameRecord({
						user_account:store.state.userInfoX.account,
						record:JSON.stringify(s),
						other_account:other_account,
						win:1,
						game_type:1,
						grade:data.regretCount === 3?5:5 - (3-data.regretCount)*1,
					})
					let result = await HttpGameTotalRecord({
						account:store.state.userInfoX.account,
						game_type:1
					})
					await HttpAlterScore({
						account:store.state.userInfoX.account,
						score:result.total
					})
				}
			}
			clearMain()
			bus.emit('tip',winDescride.value)
			return
		}
		// else{
		// 	if(data.playChess == "黑棋"){
		// 	  useTiming(10,(count)=>{
		// 		timing.value = count
		// 		data.isStartTime = 2
		// 	  })
		// 	}else{
		// 	  useTiming(10,(count)=>{
		// 		timing.value = count
		// 		data.isStartTime = 1
		// 	  })		  
		// 	}
			
		// }
	})
	// 清除数据
	const clearMain = ()=>{
		try{
			if(data.opposite?.account === 'admin'){
				useTiming(0)
				data.isStartTime = 0
				data.playChess = "黑棋"
				data.opposite = null
				store.commit('battleInfoMain',null)
				let info = {
					infoType:'machineLeave',//离开信息
					to:store.state.userInfoX.account,
				}
				let result = sendMessage(info)
				if(result){
					 
				}
				return
			}
			let info = {
				infoType:'end',//坐标
				to:data.opposite.account?data.opposite.account:data.opposite.from,
			}
			let result = sendMessage(info)
			if(result){
				  useTiming(0)
				  data.isStartTime = 0
				  data.playChess = "黑棋"
				  data.opposite = null
				  store.commit('battleInfoMain',null)
			}
		}catch(err:any){
			
		}
		
	}
	// 发送值到对方
	const sendPosMain = (i,k)=>{
		try{
			let info = {
				infoType:'coord',//坐标
				to:data.opposite.account?data.opposite.account:data.opposite.from,
				x:i,
				y:k
			}
			let result = sendMessage(info)
			if(result){
				  useTiming(10,(count)=>{
					timing.value = count
					data.isStartTime = 1
				  })
			}
		}catch(err:any){
			
		}
	}
	// 当前房间开始游戏
	bus.on('startGame',()=>{
		startBattle()
	})
	onMounted(() => {
	  if(!store.state?.userInfoX?.token){
		  ElMessage({
		  	message: '你还未登录，请登录后开始游戏吧!',
		  	type: 'warning',
		  })
		  console.log(router)
		  router.push('/community')
	  }
	  if(!data.currentGrade){
		  gameTotalMain(1)
	  }
	  const width = gobangChessboard.value.clientWidth - 60
	  const height = gobangChessboard.value.clientHeight - 60
	  
	  // 棋盘绘制
	    params = useChessboard(chessboardCanvas,width,height)
		chessboardCanvas.value.addEventListener('click',(e:any)=>{
		  if(!data.opposite){
			  ElMessage({
			  	message: "游戏未开始，快去邀请吧！",
			  	type: 'warning',
			  })
			  return
		  }
		  if(data.isStartTime == 2){
			  params.currentType = 1
			  useChessPiece(e,params,data)
		  }else{
			  ElMessage({
			  	message: "当前不是您的回合！",
			  	type: 'warning',
			  })
		  }
		  
		})
		if(store.state.battleInfoX?.nickName){
			startBattle()
		}
		setTimeout(()=>{
			playAudio(2)
		},1000)
	})
	// 机器人下完器轮到对方
	bus.on('isMachine',()=>{
		console.log(2222)
		useTiming(10,(count)=>{
			timing.value = count
			data.isStartTime = 2
		})
	})
	// 悔棋
	const regretClick = ()=>{
		if(machineTip()) return
		if(!data.opposite){
			ElMessage({
				message: "游戏未开始！",
				type: 'warning',
			})
			return
		}
		if(!data.regretCount){
			ElMessage({
				message: "悔棋次数已用完！",
				type: 'warning',
			})
			return
		}
		let count = useIsStartchess(data)
		if(!count){
			ElMessage({
				message: "您没有可以撤回的棋子！",
				type: 'warning',
			})
			return
		}
		if(data.isStartTime === 2){
			ElMessage({
				message: "对方已经下棋，不可悔棋！",
				type: 'warning',
			})
			return
		}
		if(!data.regretUse){
			ElMessage({
				message: "已向对方发送过悔棋请求！",
				type: 'warning',
			})
			return
		}
		data.regretUse = false
		let info = {
			infoType:'regret',//悔棋信息
			to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
		}
		let result = sendMessage(info)
		if(result){
			data.regretCount--
			ElMessage({
				message: "已向对方发送悔棋请求！",
				type: 'success',
			})
			setTimeout(()=>{
				data.regretUse = true
			},1e4)
		}
	}
	// 投降
	const surrenderClick = ()=>{
		if(!data.opposite){
			ElMessage({
				message: "游戏未开始！",
				type: 'warning',
			})
			return
		}
		ElMessageBox.confirm(
		    '您确定要投降吗?',
		    '警告',
		    {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning',
		    }
		  )
		    .then(async () => {
				if(data.opposite?.account === 'admin'){
					 let s = useGetchess()
					 s.currentChess = data.currentChess
					 await HttpGameRecord({
					 	user_account:store.state.userInfoX.account,
					 	record:JSON.stringify(s),
					 	other_account:data.opposite.account,
					 	win:0,
					 	game_type:1,
					 	grade:data.regretCount === 3?10:(3-data.regretCount)*3 + 10,
					 })
					 let TotalResult = await HttpGameTotalRecord({
					 	account:store.state.userInfoX.account,
					 	game_type:1
					 })
					 await HttpAlterScore({
					 	account:store.state.userInfoX.account,
					 	score:TotalResult.total
					 })
					clearMain()
					winClick()
					return
				}
				 let info = {
					infoType:'surrender',//离开信息
					to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
				 }
				 let result = sendMessage(info)
				 if(result){
					 let other_account = data.opposite.account?data.opposite.account:data.opposite.from
					 let s = useGetchess()
					 s.currentChess = data.currentChess
					 await HttpGameRecord({
					 	user_account:store.state.userInfoX.account,
					 	record:JSON.stringify(s),
					 	other_account:other_account,
					 	win:0,
					 	game_type:1,
					 	grade:data.regretCount === 3?10:(3-data.regretCount)*3 + 10,
					 })
					 let TotalResult = await HttpGameTotalRecord({
					 	account:store.state.userInfoX.account,
					 	game_type:1
					 })
					 await HttpAlterScore({
					 	account:store.state.userInfoX.account,
					 	score:TotalResult.total
					 })
					clearMain()
					winClick()
				 }
		    })
		    .catch(() => {
		    
		    })
		
		
	}
	// 离开
	const leaverClick = ()=>{
		if(!data.opposite){
			ElMessage({
				message: "游戏未开始！",
				type: 'warning',
			})
			return
		}
		ElMessageBox.confirm(
		    '您确定要离开吗，离开游戏将结束?',
		    '警告',
		    {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning',
		    }
		  )
		    .then(() => {
				 let info = {
				 	infoType:'leave',//离开信息
				 	to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
				 }
				 let result = sendMessage(info)
				 if(result){
				 	clearMain()
					winClick()
				 }
		    })
		    .catch(() => {
		    
		    })
		
			
		
	}
	// 计算分数
	const gameTotalMain = async (type,account,total)=>{
		if(type === 1){
			let result = await HttpGameTotalRecord({
				account:store.state.userInfoX?.account,
				game_type:1
			})
			data.currentGrade = gradeTotal(result.total)
		}else if(type === 2){
			let result = await HttpGameTotalRecord({
				account:data.opposite?.account?data.opposite.account:data.opposite.from,
				game_type:1
			})
			data.otherGradeTotal = gradeTotal(result.total)
		}else{
			return gradeTotal(total)
		}
	}
	onBeforeUnmount(()=>{
		playAudio(3)
		if(!store.state?.userInfoX?.token){
			return
		}
		bus.off('win')
		bus.off('info')
		bus.off('startGame')
		bus.off('clear')
		bus.off('isMachine')
		bus.off('inviteInfo')
		bus.off('closeTip')
		if(data.opposite){
			let info = {
				infoType:'leave',//离开信息
				to:data.opposite?.account?data.opposite?.account:data.opposite?.from,
			}
			let result = sendMessage(info)
			if(result){
				clearMain()
				winClick()
			}
		}
		
	})
	
</script>

<style lang="scss" scoped>
	.gobang{
		width: 100%;
		height: calc(100%);
		background-color: white;
		position: relative;
		display: flex;
		justify-content: center;
		.gobang-chessboard{
			height: 100%;
			padding: 30px;
			display: inline-block;
			box-sizing: border-box;
			margin-right: 6%;
			position: relative;
			#chessboard{
				background-color: rgb(220,181,122);
				box-shadow: 0 0 6px 0 #aaa;
				border-radius: 3px;
			}
			.gobang-chessboard-operation{
				position: absolute;
				right: -50px;
				bottom: 25px;
				button{
					display: block;
					width: 80px;
					height: 30px;
					background-color: white;
					border-radius: 5px;
					border-top-left-radius:0 ;
					border-bottom-left-radius: 0;
					border: 1px solid #dcb57a;
					border-left: 0;
					margin-bottom: 10px;
					cursor: pointer;
					
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		.gobang-gameplay{
			width: 30%;
			height: 100%;
			display: inline-block;
			vertical-align: top;
			padding: 30px 0;
			box-sizing: border-box;
			position: relative;
			.gobang-gameplay-people-send{
				display: flex;
				align-items: center;
				position: absolute;
				top: 25px;
				right: 30px;
				.el-select{
					width: 200px;
				}
				button{
					margin-left: 10px;
				}
			}
			.gobang-gameplay-people{
				width: 100%;
				height: 50px;
				font-size: 16px;
				color: #222;
			}
			.gobang-gameplay-people-other{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				b{
					color: rgb(249, 171, 8);
					font-family: cursive;
				}
				&:nth-of-type(1){
					position: absolute;
					top: 15%;
				}
				&:nth-of-type(2){
					position: absolute;
					bottom: 10%;
				}
				span{
					&:nth-of-type(1){
						width: 60px;
						height: 60px;
						border-radius: 60%;
						overflow: hidden;
						position: relative;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					&:nth-of-type(2){
						margin-top: 10px;
					}
					strong{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						font-size: 18px;
						color: white;
						text-align: center;
						line-height: 60px;
						background-color: rgba(0,0,0,0.5);
						font-weight: 500;
					}
				}
				.inviteStyle{
					color: rgb(249, 171, 8);
					font-size: 14px;
					cursor: pointer;
					&:hover{
						opacity: 0.6;
					}
				}
			}
		}
		.gobang-win{
			width: 300px;
			height: 200px;
			position: absolute;
			left: 0;
			top: 20%;
			right: 0;
			margin: auto;
			background-color: white;
			border-radius: 5px;
			text-align: center;
			line-height: 200px;
			font-size: 16px;
			color: #222;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 0 30px;
			box-shadow: 0 0 10px 0 #aaa;
			p{
				height: 30px;
				line-height: 30px;
			}
			button{
				width: 120px;
				height: 45px;
				background-color: rgb(249, 171, 8);
				text-align: center;
				line-height: 45px;
				font-size: 16px;
				color: white;
				border: 0;
				border-radius: 5px;
				cursor: pointer;
				margin-top: 30px;
			}
			
		}
		.gobang-invite{
			:deep(.el-dialog__body){
				padding: 10px 20px 15px 20px;
			}
			.gobang-invite-seach{
				margin-bottom: 10px;
			}
			.gobang-invite-list{
				height: 300px;
				overflow: auto;
				.gobang-invite-list-bottom{
					font-size: 13px;
					color: #aaa;
					text-align: center;
					padding: 10px;
				}
				.gobang-invite-list-group{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 5px;
					border-bottom: 1px solid #eee;
					padding: 10px 0;
					span{
						display: inline-block;
						width: 20px;
						height: 20px;
						border-radius: 60%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					strong{
						font-size: 14px;
						color: #000000;
						margin: 0 20px 0 3px;
						width: calc(100% - 90px);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						b{
							color: rgb(249, 171, 8);
							font-family: cursive;
						}
					}
					button{
						padding: 3px 5px;
						font-size: 12px;
						background-color: rgb(249, 171, 8);
						color: white;
						border-radius: 5px;
						border: 0;
						cursor: pointer;
						outline: none;
						&:hover{
							opacity: 0.8;
						}
					}
				}
			}
			
		}
		
		
	}
</style>
